<form class="form-props-info-scroll layui-form temTagProps" lay-filter="temProps">
  <div class="form-props-title">
    标签属性
  </div>
  <div class="layui-collapse" lay-accordion>
    <div class="layui-colla-item">
      <h2 class="layui-colla-title">基本属性</h2>
      <div class="layui-colla-content layui-show">
          <div class="form-props-item">
            <label>内容</label>
            <textarea class="layui-textarea temText" name="tagInfo" optName='temTag'></textarea>
          </div>
          <div class="form-props-item temRadio" temPropOpt='text-align' optName='temTag'>
            <label>对齐方式</label>
            <div>
                <input type="radio" name="tagTextAlign" lay-filter="temRadio" value="left" title="左">
                <input type="radio" name="tagTextAlign" lay-filter="temRadio" value="center" title="中">
                <input type="radio" name="tagTextAlign" lay-filter="temRadio" value="right" title="右">
            </div>
          </div>


          <div class="form-props-item temColor" temPropOpt='background-color' optName='temTag'>
              <label>背景颜色</label>
              <div class="layui-input-inline" style="width: 170px;">
                <input type="text" class="layui-input temColorInput">
              </div>
              <div class="layui-inline" style="left: -11px;">
                <div class="temColorVal"></div>
              </div>
          </div>

          <div class="form-props-item temColor" temPropOpt='color' optName='temTag'>
              <label>字体颜色</label>
              <div class="layui-input-inline" style="width: 170px;">
                <input type="text" class="layui-input temColorInput">
              </div>
              <div class="layui-inline" style="left: -11px;">
                <div class="temColorVal"></div>
              </div>
          </div>
          <div class="form-props-item temSelect" temPropOpt='font-family' optName='temTag'>
              <label>字体类型</label>
              <select name="tagFontFamily" lay-filter="temSelect" >
                  <option value='"Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif'>默认</option>
                  <option value='宋体, SimSun'>宋体</option>
                  <option value='楷体, 楷体_GB2312, SimKai'>楷体</option>
                  <option value='黑体, SimHei'>黑体</option>
                  <option value='隶书, SimLi'>隶书</option>
                  <option value='"andale mono"'>andale mono</option>
                  <option value='arial, helvetica, sans-serif'>arial</option>
                  <option value='"arial black", "avant garde"'>arial black</option>
                  <option value='"comic sans ms"'>comic sans ms</option>
                  <option value='impact, chicago'>impact</option>
                  <option value='"andale mono"'>andale mono</option>
                  <option value='"times new roman"'>times new roman</option>
                </select>
          </div>

          <div class="form-props-item temSelect"  temPropOpt='font-size' optName='temTag'>
              <label>字体大小</label>
              <select name="tagFontSize" lay-filter="temSelect">
                  <option value="10px">10px</option>
                  <option value="12px">12px</option>
                  <option value="14px">14px</option>
                  <option value="16px">16px</option>
                  <option value="18px">18px</option>
                  <option value="20px">20px</option>
                  <option value="24px">24px</option>
                  <option value="36px">36px</option>
                </select>
          </div>

          <div class="form-props-item">
              <label>行高</label>
              <input type="text" name="tagLineHeight"  autocomplete="off" class="layui-input temInput" temPropOpt='line-height' optName='temTag'>
          </div>

          <div class="form-props-item">
              <label>字体样式</label>
              <div>
                <input type="checkbox" value="0" name="fontStyle[bold]" lay-filter="fontStyle"  lay-skin="primary" title="加粗">
                <input type="checkbox" value="1" name="fontStyle[decoration]"  lay-filter="fontStyle" lay-skin="primary" title="下划线">
                <input type="checkbox" value="2" name="fontStyle[italic]" lay-filter="fontStyle" lay-skin="primary" title="倾斜">
              </div>
          </div>

          <div class="form-props-item">
              <label>内边距</label>
              <input type="text" name="tagPadding" autocomplete="off" class="layui-input temInput" temPropOpt='padding' optName='temTag' >
          </div>
          <div class="form-props-item">
              <label>外边距</label>
              <input type="text" name="tagMargin" autocomplete="off" class="layui-input temInput" temPropOpt='margin' optName='temTag'>
          </div>
          

      </div>
    </div>
    <div class="layui-colla-item">
      <h2 class="layui-colla-title">高级属性</h2>
      <div class="layui-colla-content">

        <div class="addPropsTitle">
          <span>添加属性</span>
          <i class="layui-icon layui-icon-add-1 addProperty"></i>   
        </div>
        <div class="addPropsHandle" optName='' defPropName='class'>
          <div class="form-props-input">
            <input type="text" autocomplete="off" class="layui-input propKey">
            <input type="text" autocomplete="off" class="layui-input propVal">
            <i class="layui-icon layui-icon-delete itemDel"></i>   
          </div>

          
        </div>

      </div>
    </div>
  </div>
</form>

<script>
    layui.use([], function(){
      var $ = layui.$,
      form = layui.form,
      propsHandle = layui.propsHandle,
      tag = $('.selectStamp .temTag');


// ---------init赋值
      propsHandle({
        "fontStyle[bold]":tag.css('font-weight') === '700' || tag.css('font-weight') === 'bold' ? true : false,
        "fontStyle[decoration]":tag.css('text-decoration-line') === 'underline' ? true : false,
        "fontStyle[italic]":tag.css('font-style') === 'italic' ? true : false,
      })


      
      

//  -----------附加操作---------


      form.on('checkbox(fontStyle)', function(data){
        var check = data.elem.checked;
        if(data.value === '0'){
          tag.css('font-weight',check ? '700':'normal')
        }else if(data.value === '1'){
          tag.css('text-decoration-line',check ? 'underline':'inherit')
        }else if(data.value === '2'){
          tag.css('font-style',check ? 'italic':'normal')
        }
      });




    });
</script>